﻿@page
@model CoreRp.Pages.admin.system.user.layuiModel
@{
    ViewData["title"] = "用户列表";
}
<table id="demo" lay-filter="list"></table>
@section Scripts{
    <script>
        let form;
        layui.use('form', function () {
            form = layui.form;
            //各种基于事件的操作，下面会有进一步介绍
        });
        let table;
        layui.use('table', function () {
            table = layui.table;

            //第一个实例
            table.render({
                id: 'idtable',
                elem: '#demo',
                url: window.basepath + 'api/user/page', //数据接口,
                page: true, //开启分页
                cols: [[ //表头
                    { field: 'USERCODE', title: '用户代码', width: 380, sort: true, fixed: 'left' },
                    { field: 'LOGINNAME', title: '登陆名', width: 180, sort: true, fixed: 'left' },
                    { field: 'REALNAME', title: '真实姓名', width: 180, sort: true, fixed: 'left' },
                    { field: 'NICKNAME', title: '昵称', width: 180, sort: true, fixed: 'left' },
                    { field: 'SEX', title: '性别', width: 180, sort: true, fixed: 'left' },
                    { field: 'COMPANYCODE', title: '企业代码', width: 180, sort: true, fixed: 'left' },
                    { field: 'ENABLE', title: '是否可用', width: 180, sort: true, fixed: 'left' },
                    { fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
                ]],
                toolbar: '#toolbar'
                //defaultToolbar: ['filter', 'print', 'exports', {
                //    title: '新增', //标题
                //    layEvent: 'LAYTABLE_ADD', //事件名，用于 toolbar 事件中使用
                //    icon: 'layui-icon-tips' //图标类名
                //}]
            });

            table.on('tool(list)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'detail') { //查看
                    alert(JSON.stringify(obj))
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        ax({
                            url: 'api/user',
                            method: 'delete',
                            params: {
                                usercode: data.USERCODE
                            }
                        }).then(res => {
                            obj.del();
                            layer.close(index);
                        }).catch(err => {
                            alert(JSON.stringify(err));
                        })
                    });
                } else if (layEvent === 'edit') { //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        , title: 'xxx'
                    });
                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
            });
        });
        function Search() {
            let searchData = form.val("search-filter");
            table.reload('idtable', {
                where: searchData,
                done: (res, curr, count) => {
                    //this.where = {}
                    form.val("search-filter",searchData);
                }
            })
        }
        function AddRow() {
            layer.open({
                title: '新增用户',
                type: 2,
                area: ['500px', '560px'],
                content: ['edit', 'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                end: () => {
                    table.reload('idtable')
                }
            });
        }
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        <!-- 这里同样支持 laytpl 语法，如： -->
        {{#  if(d.auth > 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{#  } }}
    </script>
    <script type="text/html" id="toolbar">
        <div class="layui-container" style="margin:0px">
            <div class="layui-form" lay-filter="search-filter">
                <div class="layui-form-item" style="margin:0px">
                    <div class="layui-inline">
                        <label class="layui-form-label">登陆名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="LOGINNAME" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="REALNAME" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-sm" onclick="Search()">搜索</button>
                        <button class="layui-btn layui-btn-sm" onclick="AddRow()">新增</button>
                    </div>
                </div>

            </div>
        </div>
    </script>
}
